<!--头部-->
{template "header.html"}
<!--首页导航-->
{template "index-daohang.html"}
<div class="container d-gao-10 d-yincang">
</div>
{if $get.youbian !='1'}

<div class="d-kuangjia d-yincang-pc navbar-fixed-top" style="background-color: #ffffff">
	<div class="d-row" >
    	<div class="d-col-md-8">
			<div class="d-yuanjiao-bianhua-10-10 d-kuan d-bianhua-20 " style="background-color: #ffffff">
				<!--圈子头部-->
				<div class="row">
					<!--返回-->
					<div class="col-md-12 col-xs-12 d-div-zou  d-buhuanhang d-yincang-pc d-huading-100"> 
					    <a href="javascript:goBack();">
					        <img src="{HOME_THEME_PATH}quan/img/fanhui-hui.svg" width="20" height="20" class=""/>
						</a>
						<a href="{CLIENT_URL}index.php?ye=0">
						    <img class="pull-right" src="{HOME_THEME_PATH}quan/img/shouye2.png" height="20"/> 
						</a>
						<div class="pull-right d-zuoyou-20 d-quxian-0 d-buhuanhang">
							<div class="dropdown d-you-10">

							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div>
{/if}
<div class="d-wu">
	<div class="d-wu" id="dizhi">
	<div class="d-kuangjia d-beijing-baise" >
		<div class="d-row" >
			<div class="col-md-2 d-yincang d-piaofu-95" style="z-index: 1000;">
				 <span style="width: 10px; color: #ffffff;">.</span>
				<div class="d-piaofu-0-2">
					
					{template "index-zuobian-quanzi.html"}
					
				</div>
				
			</div>
			
			<div class="col-md-7">
				<div class="d-yuanjiao-bianhua-10-10 d-kuan d-beijing-baise d-bianhua-20 ">
					
					{if $get.youbian !='1'}
					<div class="d-kuan d-gao-40 d-beijing-baise d-yincang-pc">
						
					</div>
					{/if}
					<div class="d-kuan d-gao-40 d-beijing-baise d-yincang">
						<div class="pull-left">
							
							<a href="javascript:goBack();">
								<img src="{HOME_THEME_PATH}quan/img/fanhui-hui.svg" height="20" width="20" class="d-kuan-20-20"/>
							</a>
							
							
						</div>
						<div class="pull-right d-quxian-0 d-buhuanhang">
							
						</div>
					</div>
					
					<div class="d-kuan">
						<form action="/index.php?s=member&app=pay&c=pay" class="form-horizontal" method="post" name="myform" id="payform">
							{dr_form_hidden()}
							{if $dataf['spxingzhi'] == '0'}
							<input v-if="morendizhi.dizhi" type="hidden" name="pay[dizhiid]" value="{{morendizhi.id}}" />
							<input v-else type="hidden" name="pay[dizhiid]" value="-1" />
							
							<input type="hidden" name="pay[shuliang]" value="1" />
							<input type="hidden" name="pay[bianhao]" value="{$data['price_sn']}" />
							<div class="d-kuan d-shangpin-kuan d-xia-10">
								<div v-if="morendizhi.dizhi" class="d-beijing-hui d-yuanjiao-10 d-neikuang-10">
									<div class="d-shang-10 d-kuan ">
										<div class="pull-left">默认地址： </div>
										<div class="pull-right"  style="color:#ff0000">
											<a style="color:#e26a19" data-toggle="modal" data-target="#mydizhi">修改默认地址</a>
											
											<a  data-toggle="modal" data-target="#mydizhiadd" ><span class="caption-subject d-zuo-10"><i class="fa fa-plus-circle d-zitiyanse-hui"></i> 添加地址</span></a>
											
											</div>
										
										<div class="d-clear"></div>
									</div>
									<div class="d-shang-10 d-kuan ">
										<div class="pull-left">姓名: {{ morendizhi.xingming }}</div>
										<div class="pull-right"  style="color:#ff0000"><a style="color:#b1b1b1" data-toggle="modal" data-target="#mydizhixiugai">修改</a></div>
										
										<div class="d-clear"></div>
									</div>
									<div class="d-shang-10 d-kuan ">
										<div class="pull-left">联系: {{ morendizhi.shoujihaoma }}</div>
										<div class="d-clear"></div>
									</div>
									<div class="d-shang-10 d-kuan d-huanhang">
										地址: {{morendizhi.dizhi}}
									</div>
								</div>
								<div v-else class="d-beijing-hui d-yuanjiao-10 d-neikuang-10">
									<div class="pull-left">默认地址： </div>
									<div class="pull-right"  style="color:#ff0000">
										<a style="color:#e26a19" data-toggle="modal" data-target="#mydizhi">设置默认地址</a>
										
										<a  data-toggle="modal" data-target="#mydizhiadd" ><span class="caption-subject d-zuo-10"><i class="fa fa-plus-circle d-zitiyanse-hui"></i> 添加地址</span></a>
										
										</div>
									
									<div class="d-clear"></div>
								</div>
							</div>
							{/if}
							<div class="d-kuan d-shangpin-kuan d-xia-10">
								<div class="">数量: 1 {php $param = dr_string2array($datas['shipping_param']);}
								    {if $param['param'] =='1'}
									件
									{elseif $param['param'] =='2'}
									千克
									{elseif $param['param'] =='3'}
									立方
									{elseif $param['param'] =='4'}
									台
									{/if}</div>
							</div>
							<div class="d-kuan d-shangpin-kuan d-xia-10">
								<div class="">编号: {$datas['price_sn']}</div>
							</div>
							<div class="d-kuan d-shangpin-kuan d-xia-10">
								<div class="">属性: 
								{if $dataf['spxingzhi'] == '0'}实物
								{elseif $dataf['spxingzhi']=='1'}服务
								{elseif $dataf['spxingzhi']=='2'}虚拟
								{/if}
								</div>
							</div>
							<div class="">
								<div v-html="zhifu"></div>
							</div>
						
						</form>
					</div>
				</div>
				
			</div>
			<div class="col-md-3">
				
				
			</div>
		</div>
	</div>
	<div id="mydizhiadd" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mydizhiadd">
	  <div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="d-neikuang-10">
				<form @submit.prevent="addProduct">
				  <div class="form-group">
					<label for="exampleInputEmail1">姓名</label>
					<input type="text" class="form-control" v-model="newProduct.xingming" placeholder="姓名">
				  </div>
				  <div class="form-group">
					<label for="exampleInputEmail1">联系电话</label>
					<input type="text" class="form-control" v-model="newProduct.shoujihaoma"  placeholder="联系电话">
				  </div>
				  <div class="form-group">
					<label for="exampleInputEmail1">地址</label>
					<textarea class="form-control" style="height:70px; width:100%;" v-model="newProduct.dizhi" placeholder="地址"></textarea>
				  </div>
				  <button type="submit"  class="btn btn-default">添加</button>
				</form>
			</div>
		  
		</div>
	  </div>
	</div>
	<div id="mydizhi" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mydizhi">
	  <div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="d-neikuang-10">
				<div v-if="list.length > 0">
					<div v-for="tiem in list" :key="tiem.id" class="">
						<div class="d-shang-10 d-kuan ">
							<div class="pull-left">姓名: {{ tiem.xingming }}</div>
							<div class="pull-right" v-if="tiem.moren == 1" style="color:#ff0000">已默认 </div>
							<div v-else class="pull-right" style="color:#b1b1b1" @click="morenshezhi(tiem.id)"><a style="color:#b1b1b1"> 设为默认 </a></div>
							<div class="d-clear"></div>
						</div>
						<div class="d-shang-10 d-kuan ">
							<div class="pull-left">联系: {{ tiem.shoujihaoma }}</div>
							<div class="pull-right" style="color:#a3a3a3" @click="xiugaidata(tiem.id)"> <a style="color:#b1b1b1" data-toggle="modal" data-target="#mydizhixiugai">修改</a> </div>
							
							<div class="d-clear"></div>
						</div>
						<div class="d-shang-10 d-kuan d-huanhang">
							地址: {{ tiem.dizhi }}
						</div>
						<div class="d-xian d-shangxia-10"></div>
					</div>
				</div>
			</div>
		  
		</div>
	  </div>
	</div>
	<div id="mydizhixiugai" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mydizhixiugai">
	  <div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="d-neikuang-10">
				<form @submit.prevent="postxiugaidata(morendizhi.id)">
				  <div class="form-group">
					<label for="exampleInputEmail1">姓名</label>
					<input type="text" class="form-control" v-model="morendizhi.xingming" placeholder="姓名">
				  </div>
				  <div class="form-group">
					<label for="exampleInputEmail1">联系电话</label>
					<input type="text" class="form-control" v-model="morendizhi.shoujihaoma"  placeholder="联系电话">
				  </div>
				  <div class="form-group">
					<label for="exampleInputEmail1">地址</label>
					<textarea class="form-control" style="height:70px; width:100%;" v-model="morendizhi.dizhi" placeholder="地址"></textarea>
				  </div>
				  <button type="submit"  class="btn btn-default">修改</button>
				</form>
			</div>
		  
		</div>
	  </div>
	</div>
    </div>
</div>
<style>
	.btn.green:not(.btn-outline).active, .btn.green:not(.btn-outline):active, .btn.green:not(.btn-outline):hover, .open>.btn.green:not(.btn-outline).dropdown-toggle {
	    color: #FFF;
	    background-color: #3fc59f;
	    border-color: #3fc59f;
	}
	.btn.green:not(.btn-outline) {
	    color: #FFF;
	    background-color: #3fc59f;
	    border-color: #3fc59f;
	}
</style>
<script type="text/javascript">
	const { createApp } = Vue;
	const app = createApp({  
		data() {
		    return {  
		        morendizhi: {}  ,// 初始化为空数组，稍后将用接口数据填充
				list: []  ,// 初始化为空数组，稍后将用接口数据填充
				newProduct: {},
				zhifu:''
		    };  
		},  
		
		methods: {  
			gouwudizhi() {
			    axios.get('/index.php?s=member&app=quan&c=dizhi&m=gouwudizhi') // 发送GET请求到指定的URL  
			        .then(response => {
						
						if(response.data.code==0){
							layer.msg(response.data.msg,{time:500});
						}
						if(response.data.code==1){
							this.morendizhi = response.data.data;
						}
			            // 假设服务器返回的数据在response.data中  
			        })  
			        .catch(error => {  
			            console.error('Error fetching products:', error); // 处理错误情况  
			        });  
			},
			gouwuzhifu() {
			    axios.get('/index.php?s=quan&c=shangpin&m=zhifu&id={$_GET['id']}') // 发送GET请求到指定的URL  
			        .then(response => {

						if(response.data.code==1){
							this.zhifu = response.data.data;
						}
			        })  
			        .catch(error => {  
			            console.error('Error fetching products:', error); // 处理错误情况  
			        });  
			},
			fetchProducts() {
			    axios.get('/index.php?s=member&app=quan&c=dizhi&m=list&uid={$member.id}') // 发送GET请求到指定的URL  
			        .then(response => {
						
						if(response.data.code==0){
							layer.msg(response.data.msg,{time:500});
						}
						if(response.data.code==1){
							this.list = response.data.data;
						}
			            // 假设服务器返回的数据在response.data中  
			        })  
			        .catch(error => {  
			            console.error('Error fetching products:', error); // 处理错误情况  
			        });  
			},
			addProduct() {
			      // 使用axios发送POST请求  
				  var data = '&xingming='+this.newProduct['xingming']+'&shoujihaoma='+this.newProduct['shoujihaoma']+'&dizhi='+this.newProduct['dizhi'];
				  
			      axios.post('/index.php?is_ajax=1&s=member&app=quan&c=dizhi&m=add', data)  
			        .then(response => {  
			          // 请求成功，处理响应数据  
					  if(response.data.code==0){
					  	layer.msg(response.data.msg,{time:500});
					  }
					  if(response.data.code==1){
					  	layer.msg(response.data.msg,{time:500});
						this.newProduct = {'xingming':'',};
						this.fetchProducts();
						this.gouwudizhi();
						this.gouwuzhifu();
						$("#mydizhiadd").hide();
						$(".modal-backdrop").hide();
					  }
			          this.addResult = 'Product added successfully!'; // 或者使用response.data中的实际信息  
			          // 你可以根据需要清空表单字段或执行其他操作  
			          //this.newProduct = {}; // 清空表单  
					  
			        })  
			        .catch(error => {  
			          // 请求失败，处理错误  
			          this.addResult = 'Error adding product: ' + error.message;  
			          console.error('Error adding product:', error); // 在控制台打印错误信息  
			        });  
				
			},
			postxiugaidata(id) {
				// 使用axios发送POST请求
				var data = '&xingming='+this.morendizhi['xingming']+'&shoujihaoma='+this.morendizhi['shoujihaoma']+'&dizhi='+this.morendizhi['dizhi'];
			    axios.post('/index.php?s=member&app=quan&c=dizhi&m=xiugai&id='+id,data) // 发送GET请求到指定的URL  
			        .then(response => {
						
						if(response.data.code==0){
							layer.msg(response.data.msg,{time:500});
						}
						if(response.data.code==1){
							this.gouwudizhi();
							this.gouwuzhifu();
							$("#mydizhixiugai").hide();
							$(".modal-backdrop").hide();
						}
			            // 假设服务器返回的数据在response.data中  
			        })  
			        .catch(error => {  
			            console.error('Error fetching products:', error); // 处理错误情况  
			        });  
			},
			morenshezhi(id) {
				console.log(id);
			    axios.get('/index.php?s=member&app=quan&c=dizhi&m=moren&id='+id) // 发送GET请求到指定的URL  
			        .then(response => {
						
						if(response.data.code==0){
							layer.msg(response.data.msg,{time:500});
						}
						if(response.data.code==1){
							layer.msg(response.data.msg,{time:500});
							this.fetchProducts();
							this.gouwudizhi();
							this.gouwuzhifu();
						}
			            // 假设服务器返回的数据在response.data中  
			        })  
			        .catch(error => {  
			            console.error('Error fetching products:', error); // 处理错误情况  
			        });  
			},
		},
		mounted() {
			// 在组件挂载后调用fetchProducts方法  
			this.gouwudizhi();
			this.fetchProducts();
			this.gouwuzhifu();
		},
	}); 
	// 挂载应用到DOM元素上
	app.mount('#dizhi'); 
	// 购买地址
	    function add_buy() {
	        var url = "{dr_url('quan/shangpin/buy', ['id' => $id]}";
	        $.get("/index.php?is_ajax=1&s=quan&c=shangpin&m=jiance&id={$id}", function(data){
	        	//dr_cmf_tips(data.code, data.msg);
	            if (data.code =="1") {
	        		
					window.location.href = url;
					
	                //console.log('jin', msg); 
	            }
				if (data.code =="0") {
					
					layer.msg(data.msg,{time:500});
				   
				}
				
	        }, 'json');
	    }
		
</script>
<!--尾部-->
{template "fanhui.html"}
{template "footer.html"}